<template>
  <div class="mychecking">
    <div><Title :title="mychecking"></Title></div>
    <div class="box">
      <div class="box_div">
        <div>
          <el-input v-model="input" style="width: 200px" placeholder="请输入内容"></el-input>
         <el-button type="primary" @click="inquireFun">查询</el-button>
         <el-button type="primary" @click="reset">重置</el-button>
        </div>
         <div><el-button type="primary" @click="batchFun">批量审批</el-button></div>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed prop="date" label="部门名称" width="150">
          </el-table-column>
          <el-table-column prop="name" label="部门领导" width="150">
          </el-table-column>
          <el-table-column prop="province" label="部门成员" width="150">
          </el-table-column>
          <el-table-column prop="city" label="成员岗位" width="150">
          </el-table-column>
          <el-table-column prop="address" label="在职状态" width="220">
          </el-table-column>
          <el-table-column prop="zip" label="早打卡时间" width="150">
          </el-table-column>
          <el-table-column prop="zip" label="晚打卡时间" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
              <el-button type="text" size="small"
               @click='handleClick(scope.row)'>修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import  Title from '../../components/title.vue'
import { reactive,ref} from 'vue';

export default {
  components:{
    Title
  },
  data() {
    return {
      mychecking:'我的考勤'
    };
  },
  setup() {
    const input=ref('')
    const tableData=reactive([
      {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }
    ])
    const handleClick=(row)=>{
      console.log(row);
    }
    const inquireFun =()=>{
      console.log(input.value);
    }
    const reset = ()=>{
      input.value=''
    }
    const batchFun= ()=>{

    }
    return {
      input,
      tableData,
      reset,
      inquireFun,
      batchFun,
      handleClick
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/scss.scss";
.mychecking {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box{
  width: 100%;
  background: white;
  .box_div{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.header {
  width: 100%;
  height: 30px;
  border-left: $border-left;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  span {
    margin-left: 15px;
  }
}
</style>